<template>
  <div class="content-box">
    <div id="slider" class="mui-slider mui-fullscreen">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item', item.name =='社会百态'?'mui-active' : '']"
            v-for="item in cate"
            :key="item.name"
            @click="getSingleCate(item.cateId,$event)"
            ref="aItem"
          >{{ item.name }}</a>
        </div>
      </div>
    </div>

    <!-- 嵌套 v-for 和 v-if -->
    <!-- 
			list: [
			{ 
				title:""
				value: [
				{ value1:1, value2:2},
				{},...
				]
			}，
			{}, {}
			]
    -->
    <!-- v-if v-lazy 在同一元素上，否则会循环出多个div(v-if) -->
    <ul>
      <router-link
        v-for="item in singleCateList"
        :key="item.id"
        tag="li"
        :to="'/home/galleryDetail/'+item.type+'/'+item.itemId"
      >
        <div v-for="(value,index) in item.list" :key="index">
          <img v-if="index==0" :src="value.middle">
        </div>
        <div>
          <h4 class="title">{{ item.title }}</h4>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
//引入此js文件采用的是非严格模式，需要使用babel-plugin-transform-remove-strict-mode插件，
//使用"@babel/plugin-transform-runtime"会报错
//因为bundle.js采用的是严格模式打包的
// "export 'default' (imported as 'mui') was not found in 报错
import mui from "../../../lib/mui/js/mui.min.js";
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      cate: [],
      singleCateList: [],
      title: "图吧"
    };
  },
  created() {
    this.getCate();
    this.getSingleCate(1001);
    this.showTitle(this.title);
  },
  mounted() {
    // mui使用需要初始化，注意初始化时机
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods: {
    getCate() {
      var url = "https://route.showapi.com/852-1";
      var data = {
        showapi_appid: "88927", //这里需要改成自己的appid
        showapi_sign: "7132f458c7df46c88cdd908f5346fb25" //这里需要改成自己的应用的密钥secret
      };
      this.$http
        .post(url, this.$qs.stringify(data))
        .then(res => {
          // console.log(res);
          if (res.data.showapi_res_body.ret_code == 0) {
            var result = res.data.showapi_res_body.list;
            // 测试接口的分类id以获取又图片的资源
            for (let index = 0; index < result.length; index++) {
              if(index == 5) {
                result[index].cateId = index + 1 + "003";
              } else if(index == 6){
                result[index].cateId = index + "001";
              } else if(index ==4){
                result[index].cateId = index + "003";
              } else {
                result[index].cateId = index + 1 + "001";
              }
              
            }
            this.cate = result;
          } else {
            Toast("列表加载失败");
          }
        })
        .catch(error => {
          Toast("Sorry, please try again");
        });
    },

    getSingleCate(cateId, e) {
      var url = "https://route.showapi.com/852-2";
      var data = {
        showapi_appid: "88927", //这里需要改成自己的appid
        showapi_sign: "7132f458c7df46c88cdd908f5346fb25", //这里需要改成自己的应用的密钥secret
        type: cateId,
        page: 1
      };
      this.$http
        .post(url, this.$qs.stringify(data))
        .then(res => {
          // console.log(res);
          if (res.data.showapi_res_body.ret_code == 0) {
              var result = res.data.showapi_res_body.pagebean.contentlist;
              // console.log(result)
              
              // 此处对返回的数据进行判断，判断是否是有效图片，不是就从结果列表中删除
              // 注意：使用forEach时，删除后，列表数量会改变。原来顺序会被打乱，不能根据index找到对应的要删除的那一项
              // 使用for可以在删除后，对索引减一，len会一直变化，随删除后的数组长度的变化而变化
              for(var i=0,len=result.length; i<5; i++){
                var o = result[i].list[0];
                // console.log(result[i].list[0])
                if(o.middle ==  "http://pic.people.com.cn"){
                  result.splice(i,1);
                  --i;
                  // console.log(result)
                }
              }
              // console.log(result)
              this.singleCateList = result;
          } else {
            Toast("图片加载失败");
          }
        })
        .catch((error) => {
          Toast("Sorry, picture didn't find, please try again later");
          // Toast(error);
        });

      // v-for 循环生成，所以这样得到的是一个数组
      // [a.mui-control-item.mui-active, a.mui-control-item, ..., a.mui-control-item]
      // console.log(this.$refs.aItem);
      var aItems = this.$refs.aItem;
      if (aItems) {
        for (let index = 0; index < aItems.length; index++) {
          aItems[index].className = "mui-control-item";
        }
        // vue中的事件处理函数，在绑定事件时加$event，否则时undefined
        e.target.className = "mui-control-item mui-active";
      }
    },

    showTitle(title) {
      this.$emit("getTitle", title);
    }
  }
};
</script>

<style lang="scss" scoped>
//Unable to preventDefault inside passive event listener due to target being treated as passive.
// 解决此bug
* {
  touch-action: pan-y;
}
.mui-fullscreen {
  top: 40px;
  height: 40px;
}
ul {
  padding: 30px 0 0;
  margin-top: 0;
  overflow-y: auto;
  li {
    list-style: none;
    background-color: #eee;
    margin: 5px;
    box-shadow: 0 0 5px #ccc;
    border-radius: 10px;
    text-align: center;

    position: relative;
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    img {
      width: 100%;
      vertical-align: middle;
      border-radius: 10px;
    }
    h4 {
      position: absolute;
      bottom: 20px;
      left: 0;
      background: rgba($color: #000000, $alpha: 0.3);
      max-height: 80px;
      color: #fff;
      padding: 10px 20px;
      vertical-align: middle;
      font-weight: 400;
    }
  }
}
</style>